import { ExtractPropTypes } from 'vue'
import { LoadingModes, LoadingMode } from '../tn-loading'
import { validatorColorValue, validatorSizeValue } from '../../utils'
/**
 * 加载状态有效值
 */
const LoadMoreStatuss = ['loadmore', 'loading', 'nomore'] as const
export type LoadMoreStatus = typeof LoadMoreStatuss[number]

/**
 * 提示信息文字类型
 */
export type LoadMoreTipsText = {
  /** 加载更多 */
  loadmore?: string,
  /** 正在加载 */
  loading?: string,
  /** 没有更多 */
  nomore?: string
}

/**
 * props参数
 */
export const loadMoreProps = {
  /** 加载状态 */
  status: {
    type: String,
    default: 'loadmore',
    validator: (value: LoadMoreStatus) => {
      return LoadMoreStatuss.includes(value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 字体大小, 默认单位为rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 显示加载中动画, 在status为loading时有效 */
  loadingAnimation: {
    type: Boolean,
    default: true
  },
  /** 加载动画样式 */
  loadingAnimationType: {
    type: String,
    default: 'circle',
    validator: (value: LoadingMode) => {
      return LoadingModes.includes(value)
    }
  },
  /** 加载动画颜色, 只支持十六进制、rgba()、rgb(), 在circle模式下有效 */
  loadingAnimationColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value, false)
    }
  },
  /** 显示粗点代替status为nomore模式下的文字 */
  noMoreDot: {
    type: Boolean,
    default: false
  },
  /** 不同状态的提示文字 */
  loadTipsText: {
    type: Object,
    default: (): LoadMoreTipsText => {
      return {
        loadmore: '加载更多',
        loading: '正在加载...',
        nomore: '加载完毕'
      }
    }
  },
  /** 自定义样式 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  }
}
export type LoadMoreProps = ExtractPropTypes<typeof loadMoreProps>

export const loadMoreEmits = {
  /** 点击事件 */
  click: (type: LoadMoreStatus) => true
}
export type LoadMoreEmits = typeof loadMoreEmits
